
// 获取浏览器地址栏数据参数
const urlObj = myGetUrlVal();
console.log(urlObj);

// 调用函数 动态渲染生成页面
setPage();



// 使用 async 封装 异步 ajax 请求
async function setPage() {
    const response = await myPromiseJQueryAjax('../server/goods_detail.php', 'post', { goods_id: urlObj.goods_id }, 'json');

    console.log(response);

    // 向页面写入内容
    $('.container').html(`  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">商品详细信息</h3>
    </div>
    <div class="panel-body">
      <div class="media">
        <div class="media-left">
          <a href="#">
            <img class="media-object" src="${response.goods_big_logo}" alt="...">
          </a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">${response.goods_name}</h4>
          <p>
            <i class="glyphicon glyphicon-yen"></i>
            <span>${response.goods_price}</span>
          </p>
          <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">XL</button>
            <button type="button" class="btn btn-default">L</button>
            <button type="button" class="btn btn-default">M</button>
            <button type="button" class="btn btn-default">S</button>
            <button type="button" class="btn btn-default">XS</button>
          </div>
          <p style="position:relative">
            <input name="num" value="1" class="num">
            <button name="-" type="button" class="jian btn btn-default">-</button>
            <button name="+" type="button" class="jia btn btn-default">+</button>
          </p>
          <p>
            <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
            <a href="JavaScript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
          </p>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
        <li role="presentation"><a href="#">商品参数信息</a></li>
        <li role="presentation"><a href="#">相关商品</a></li>
      </ul>
      <div>
        ${response.goods_introduce}
      </div>
    </div>
  </div>
`);


    // 通过 事件委托 语法 给 标签 添加 点击事件
    $('.container').click(function (e) {

        // 如果点击的标签 name是- 点击的是 减按钮
        if ($(e.target).attr('name') === "-") {
            // 获取 input标签 value属性值 需要转化为数值类型
            let num = Number($('[name="num"]').val());

            // value数值 累减1
            num--;

            // 设定极值 最小值是 1 
            num = num < 1 ? 1 : num;

            // 将 累减结果 赋值给 标签 value属性
            $('[name="num"]').val(num);

            // 如果点击的标签 name是+ 点击的是 加按钮
        } else if ($(e.target).attr('name') === "+") {
            // 获取 input标签 value属性值 需要转化为数值类型
            let num = Number($('[name="num"]').val());

            // value数值 累加1
            num++;

            // 设定极值 最大值 是 库存数量 
            num = num > response.goods_number ? response.goods_number : num;

            // 将 累减结果 赋值给 标签 value属性
            $('[name="num"]').val(num);


            // 如果点击的标签 name是 cart 点击的是 加入购物车 按钮
        } else if ($(e.target).attr('name') === "cart") {
            // 获取 cookie对象 
            const cookieObj = myGetCookie();
            console.log(cookieObj);

            // 判断 有没有登录

            if (cookieObj.login === undefined) {
                // 没有登录 跳转 登录页面 同时携带当期页面url地址数据
                if (window.confirm('您还没有登录 点击确定跳转登录页面')) {
                    window.location.href = `./login.html?url=${window.location.href}`;

                }

            } else {
                // 已经登录 将当前商品添加到购物车数据信息中 跳转购物车页面

                // 获取 本地 localStorage 中 购物车的数据信息
                let cart = localStorage.cart;

                // 还没有创建过购物车数据
                if (cart === undefined) {
                    // 给当前商品数据 新增属性

                    // 新加入购物车的商品 默认 是 购买的状态 
                    response.buy = true;

                    // 新加入的商品 购买数量 必须是 1 - 库存 之间
                    let num = Number($('[name="num"]').val());

                    if (!(num >= 1 && num <= response.goods_number)) {
                        // 如果 商品购买数量 不是 1 - 库存之间

                        // 弹出提示信息
                        window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                        // 通过 return 终止 之后程序的执行
                        return;
                    }

                    // 购买数量 在 范围内 再 添加 购买数量属性
                    response.num = num;

                    // 以数组存储对象的语法形式 存储到 localStorage 购物车数据中
                    localStorage.cart = JSON.stringify([response])

                    // 购物车已经创建 localStorage.cart 其中 存储了 json字符串
                } else {
                    // 将 json字符串 还原为 对应的数据结构
                    cart = JSON.parse(cart);
                    console.log(cart);

                    // 如果购物车数组 是一个空数组 也就是 数组.length 是 0
                    if (cart.length === 0) {
                        // 当前商品信息 直接 添加属性 写入 购物车数据信息中
                        // 新加入购物车的商品 默认 是 购买的状态 
                        response.buy = true;

                        // 新加入的商品 购买数量 必须是 1 - 库存 之间
                        let num = Number($('[name="num"]').val());

                        if (!(num >= 1 && num <= response.goods_number)) {
                            // 如果 商品购买数量 不是 1 - 库存之间

                            // 弹出提示信息
                            window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                            // 通过 return 终止 之后程序的执行
                            return;
                        }

                        // 购买数量 在 范围内 再 添加 购买数量属性
                        response.num = num;

                        // 在 cart 数组中 新增当前商品数据信息
                        // 使用 数组.unshift() 在 数组的起始位置新增当前商品
                        cart.unshift(response);

                        // 将 新数组的数据 信息 写入 localStorage 中
                        localStorage.cart = JSON.stringify(cart);

                        // 如果 购物车数据信息 不是空数组
                    } else {
                        // 查询 当前新增商品 在不在 购物车数组中
                        // 使用 数组.some() 判断 数组数据中 有没有 goods_id 和 当前商品 goods_id 相同的
                        // 如果 数组.some() 结果是 false 当前新增商品 不在 购物车数组中
                        // 如果 数组.some() 结果是 true  当前新增商品   在 购物车数组中
                        let bool = cart.some(function (item) {
                            return item.goods_id === response.goods_id;
                        })

                        console.log(bool);

                        // 新增商品不在购物车数组中 
                        // 新增商品 添加属性 写入购物车数组 存储到 localStorage中
                        if (bool === false) {
                            // 当前商品信息 直接 添加属性 写入 购物车数据信息中
                            // 新加入购物车的商品 默认 是 购买的状态 
                            response.buy = true;

                            // 新加入的商品 购买数量 必须是 1 - 库存 之间
                            let num = Number($('[name="num"]').val());

                            if (!(num >= 1 && num <= response.goods_number)) {
                                // 如果 商品购买数量 不是 1 - 库存之间

                                // 弹出提示信息
                                window.alert(`您只能购买 1 - ${response.goods_number} 范围内的商品`);

                                // 通过 return 终止 之后程序的执行
                                return;
                            }

                            // 购买数量 在 范围内 再 添加 购买数量属性
                            response.num = num;

                            // 在 cart 数组中 新增当前商品数据信息
                            // 使用 数组.unshift() 在 数组的起始位置新增当前商品
                            cart.unshift(response);

                            // 将 新数组的数据 信息 写入 localStorage 中
                            localStorage.cart = JSON.stringify(cart);

                            // 新增商品 在 购物车数组中 
                            // 找到 购物车数组中 相同商品 新增购买数量
                        } else {
                            // 循环遍历购物车数组 
                            for (let i = 0; i <= cart.length - 1; i++) {
                                // 找 goods_id 相同的
                                if (cart[i].goods_id === response.goods_id) {
                                    // 获取 input 输入框 数据
                                    let num = Number($('[name="num"]').val());

                                    // 新增购买数量 + 原始购买数量 不能超过 库存
                                    if (cart[i].num + num > cart[i].goods_number) {
                                        // 如果 原始购买数量 + 新增购买数量 大于 库存
                                        // 弹出报错信息 
                                        window.alert(`您已经购买${cart[i].num}件商品 最多再买${cart[i].goods_number - cart[i].num}件商品`);

                                        // return 终止之后程序执行
                                        return;
                                    }

                                    // 累加 新增购买数量
                                    cart[i].num += num;

                                    // 将 新数组数据 存储到 localStorage 中
                                    localStorage.cart = JSON.stringify(cart);

                                    // break 终止循环
                                    break;
                                }
                            }

                        }
                    }
                }


                // 跳转购物车页面
                window.location.href = './cart.html';

            }
        }
    })
}


/*
  1,  获取 浏览器地址栏 参数数据

  2,  根据 参数数据 发送 ajax请求
      根据 响应体结果 动态渲染生成页面

      向 server/goods_detail.php 文件发送请求
        以 post 方式 携带 1个参数
        键名是 goods_id

      根据 响应体数据 动态渲染生成页面

  3,  通过事件委托 添加 点击事件
    因为 需要 根据 响应体数据执行 将程序写在 async 函数中

    点击 - 减按钮 
      获取 input标签的原始数据 转化为数值类型
      累减1 
      设定极值 最小值是 1
      将 累减 结果 赋值给 input标签

    点击 + 减按钮 
      获取 input标签的原始数据 转化为数值类型
      累加1 
      设定极值 最大值是 库存
      将 累减 结果 赋值给 input标签

    点击 加入购车车 按钮 

      判断 登录 

        如果 没有登录 跳转 登录页面 同时携带 当前页面浏览器地址栏url地址


        如果 已经登录 添加当前商品 跳转 购物车页面
          将当前商品信息 添加至 购物车数据
            购物车数据应该是 数据库数据 当前使用 localStorage 存储 购物车数据

            没有创建 购物车数据

              将当前商品数据 新增属性之后 以数组存储对象的形式 存储到 localStorage

            如果创建 购物车数据

              判断 存储的数据 是不是 空数组 
                如果是 空数组 当前商品新增属性之后 直接添加到 购物车中

                如果不是 空数组 
                  查询 购物车中 和 当前商品 相同的商品 添加购买数量

                  如果 购物车中 没有 和 当前商品 相同的商品
                  当前商品 新增属性后 添加到 购物车数组中


          设定 window.location.href
            跳转购物车页面


*/
